Visual Indicators to Differentiate Items in a List列表中專案的視覺區分：顏色與圖示的有效組合

使用者在網頁中查詢列表專案時，如果視覺標識同時結合顏色和圖示，與僅使用文字相比，速度快約37%。若必須在顏色和圖示之間選擇，具有明確資訊意義的圖示比僅使用顏色的效果更好。

移動裝置螢幕空間有限，使用者往往注意力分散。在設計中，合理使用視覺標識可以幫助使用者快速定位重要資訊，而不應為節省空間而隨意移除這類“有用的冗餘”。

電子商務網站上的指標通常用於表示獨家產品或特價商品，如上述 REI.com 的手機截圖所示。

什麼是視覺標識？

視覺標識是幫助使用者快速定位列表中具有重要特性的專案的“標記”。例如，電商網站可能會用視覺標識標記“新品”或“折扣商品”。

研究方法

選擇了4個移動頁面（包括電商列表和股票資料表）進行測試。每種頁面中有兩類需要標識的專案（如股票資料表中標記“上漲”和“下跌”的股票）。設計了以下4種視覺標識：

  1. 僅文字：標識僅透過文字標籤區分。
  1. 僅顏色：標識僅透過不同顏色區分。
  1. 僅圖示：標識僅透過不同圖示區分。
  1. 顏色與圖示結合：標識透過不同顏色和圖示組合區分。
4 個相同移動頁面的版本，對應 4 種視覺指示符對；從左到右：僅有文字、僅有顏色、僅有圖示以及顏色和圖示都有。

每種頁面的列表包含多個專案，其中部分專案帶有不同標識。96位使用者參與測試，每人檢視4種標識中的一種，並完成查詢特定專案的任務。

測試的使用者體驗指標包括：

測試結果

1 僅文字：效果最差

僅使用文字標識的設計在所有測試變數中表現最差。使用者平均完成任務的時間比表現最好的“顏色與圖示結合”標識慢57%。

與其他型別的指示符相比，參與者在僅透過文字區分指示符的設計上找到所有專案所花費的時間明顯更多。（柱形圖中較低的柱形表示效果更好。）
與其他型別的指示符相比，參與者使用純文字指示符定位特定專案的速度明顯較慢。（條形越低越好。）
與其他型別的指示對相比，使用純文字指示時，參與者在頁面上找到他們必須找到的所有 3 個專案的成功率最低。（柱狀圖越高越好。）

2 圖示與顏色的比較

在部分測試（如股票資料表）中，僅圖示的效果略優於僅顏色。這可能是因為：

  1. 圖示（如上下箭頭）更符合使用者預期。
  1. 顏色需要使用者推斷（如紅色表示下跌，綠色表示上漲），可能耗費更多時間。
與僅顏色條件相比，參與者在僅圖示條件下定位一個專案的速度更快（首次點選的平均時間大約等於首次正確點選的平均時間，因為對於這些站點，大多數首次點選是正確的）。（較低的柱狀圖表示更好。）

3 顏色與圖示結合：效果最佳

無論是時間還是成功率指標，同時使用顏色和圖示的標識在所有測試中表現最好。這種組合增強了使用者注意到標識的可能性，並顯著提高了查詢速度和準確性。

設計建議

根據研究結果，以下是設計視覺標識的建議：

  1. 優先使用顏色與圖示結合：這種設計最明顯，能夠顯著提升使用者體驗。
  1. 圖示優先於顏色：如果只能選擇一種，優先選擇資訊意義明確的圖示。
  1. 避免僅使用文字標識：文字標識難以被快速識別，且成功率低。
  1. 確保標識資訊明確：顏色和圖示必須具有明確的關聯性，如上漲用綠色箭頭、下跌用紅色箭頭。

在移動裝置測試中，同時使用顏色和圖示的標識比僅使用文字快37%。儘管未在更大的桌面螢幕上測試，但可以推測類似的結果也會出現，甚至速度提升的效果可能更明顯。

總結：合理使用視覺標識（特別是顏色與圖示結合）不僅能幫助使用者快速定位資訊，還能提高任務完成的準確性，提升整體使用者體驗。